<template>
  <div class="login">
    <div class="banner"></div>
    <div class="container flex flex-fd-c flex-jc-c flex-ai-c">
      <div class="flex flex-jc-c flex-ai-c login-tab">
        <div>登录</div>
        |
        <div>注册</div>
      </div>
      <div class="form">
        <el-input class="mobile" v-model="mobile" oninput="value=value.replace(/[^\d]/g,'')" maxlength="11" placeholder="请输入手机号"></el-input>
        <el-input class="code" v-model="code" maxlength="6" placeholder="验证码"></el-input>
        <el-button type="primary" class="code-btn" style="width: 212px; height: 76px; font-size: 28px" :disabled="disabled" @click="getCode">
          <span v-show="show">获取验证码</span>
          <span v-show="!show" class="count">{{ count }} s</span></el-button
        >
        <el-button type="primary" class="login-btn" style="width: 100%; height: 94px; font-size: 36px" :disabled="loginDisabled" @click="login">同意协议并登录</el-button>
      </div>
      <p class="mt-48">已阅读并同意以下协议<span style="color: #0a68a2; cursor: pointer">《就这租用户注册使用协议》</span></p>
    </div>
  </div>
</template>

<script>
const TIME_COUNT = 60
import { postApiUserSendSms, postApiUserLogin } from '@/api'
import { Message } from 'element-ui'
import { mapMutations } from 'vuex'

export default {
  data() {
    return {
      mobile: '',
      code: '',
      disabled: true,
      loginDisabled: true,
      show: true,
      count: '',
      timer: null
    }
  },
  watch: {
    mobile(newValue, oldValue) {
      if (newValue && newValue.length === 11) {
        this.disabled = false
      }
      if (oldValue.length === 11 && newValue.length !== 11) {
        this.disabled = true
      }
    },
    code(newValue, oldValue) {
      if (newValue && newValue.length === 6) {
        this.loginDisabled = false
      }
      if (oldValue.length === 6 && newValue.length !== 6) {
        this.loginDisabled = true
      }
    }
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    getCode() {
      if (!this.timer) {
        this.count = TIME_COUNT
        this.show = false
        this.disabled = true

        postApiUserSendSms({ phone: this.mobile }).then((res) => {
          if (res.code === 200) {
            Message.success('验证码发送成功！')
          } else {
            Message.error('验证码发送失败，请稍后再试！')
          }
        })

        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.show = true
            this.disabled = false
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
    },
    login() {
      postApiUserLogin({
        phone: this.mobile,
        code: this.code
      }).then((res) => {
        if (res.code === 200) {
          Message.success(res.msg)
          this.setUserInfo(res.data)
          this.$router.back()
        } else {
          Message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  .mt-48 {
    margin-top: 48px;
  }
  .banner {
    height: 934px;
    background-image: url(~@/assets/images/login_banner.png);
    background-repeat: no-repeat;
    background-position: center;
  }
  .container {
    padding: 160px 0 120px;
    .login-tab {
      font-size: 44px;
      color: #000;
      margin-bottom: 40px;
    }
    .form {
      width: 626px;
      position: relative;
      .code-btn {
        position: absolute;
        right: 0px;
        bottom: 136px;
        background-color: #0a68a2;
        border-color: #0a68a2;
        &.is-disabled {
          background-color: #cdcdcd;
          border-color: #cdcdcd;
        }
      }
      /deep/ .el-input__inner {
        border-top: none;
        border-left: none;
        border-right: none;
        border-radius: 0;
        border-bottom-width: 5px;
        margin-bottom: 32px;
        padding: 16px;
        padding-left: 46px;
        background-repeat: no-repeat;
        box-sizing: content-box;
        font-size: 28px;
      }
      .mobile {
        width: 100%;
        /deep/ .el-input__inner {
          width: calc(100% - 46px - 16px);
          background-image: url(~@/assets/images/icon-mobile.png);
          background-position: 0px 14px;
          background-size: 32px 46px;
        }
      }
      .code {
        width: 100%;
        /deep/ .el-input__inner {
          width: calc(100% - 46px - 16px);
          background-image: url(~@/assets/images/icon-code.png);
          background-position: 0px 14px;
          background-size: 32px 40px;
        }
      }
      .login-btn {
        background-color: #0a68a2;
        border-color: #0a68a2;
        margin: 0;
        &.is-disabled {
          background-color: #cdcdcd;
          border-color: #cdcdcd;
        }
      }
    }
  }
}
</style>
